<template>
	<div class="vipvideo">
		<h4>精选音频</h4>
		<ul>
			<li v-for="(v,i) in arr" :key="i">
				<img :src="v.img" />
				<h5>{{v.title}}</h5>
				<p>{{v.count}}</p>
				<span>{{v.pirce}}</span>
			</li>
		</ul>	
	</div>
</template>

<script>
	export default{
		data(){
			return {
				arr: [
					{
						"img": "img/vipvideo1.png",
						"title": "《推背图中的历史》神秘语言",
						"count": "160次收听",
						"pirce": "￥9.9"
					},
					{
						"img": "img/vipvideo2.png",
						"title": "5小时学会看财务报表",
						"count": "新品推荐",
						"pirce": "￥199"
					},
					{
						"img": "img/vipvideo3.png",
						"title": "永远要有心疼自己的能力",
						"count": "新品推荐",
						"pirce": "￥18"
					},
					{
						"img": "img/vipvideo4.png",
						"title": "易中天说禅",
						"count": "91次收听",
						"pirce": "￥39"
					},
					{
						"img": "img/vipvideo5.png",
						"title": "世界经典神话故事|教材必读",
						"count": "107次收听",
						"pirce": "￥22.9"
					},
					{
						"img": "img/vipvideo6.png",
						"title": "曾国藩家书（白话全译精读版）",
						"count": "26次收听",
						"pirce": "￥19.9"
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.vipvideo{
		padding-bottom: 0.55rem;
		margin-top: -0.6rem;
		h4{
			font-size: 0.18rem;
			padding: 0.2rem 0.15rem;
		}
		ul{
			width: calc(100% - 0.5rem);
			margin-left: 0.15rem;
			padding-top: 0.15rem;
			padding-right: 0.15rem;
			padding-left: 0.15rem;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			li{
				list-style: none;
				width: 1rem;
				height: 1.95rem;
				border-bottom: 1px solid #f8f8f8;
				background-color: #FFFFFF;
				margin-right: 0.1rem;
				position: relative;
				h5{
					font-size: 0.14rem;
					position: absolute;
					top: 1.05rem;
				}
				p{
					color: #898989;
					font-size: 0.12rem;
					position: absolute;
					bottom: 0.3rem;
				}
				span{
					color:#e60604;
					font-size: 0.1rem;
					position: absolute;
					bottom: 0.1rem;
					left: 0.03rem;
				}
			}
			li:nth-of-type(3),li:nth-of-type(6){
				margin-right: 0;
			}
		}
		
	}
</style>
